<template>
	<div class="container">
		<div class="header">
			<el-card>
				<div>反馈记录</div>
			</el-card>
		</div>
		<!-- 用户列表 -->
		<div class="mian-table">
			<div style="padding: 20px;width: 100%;">
				<el-form label-width="100px" :model="form" :inline="true">
					<el-form-item label="手机号">
						<el-input v-model="form.phone" placeholder="请输入手机号搜索" clearable />
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="searchStatus" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期筛选">
						<el-date-picker v-model="timeValue" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
							value-format="timestamp">
						</el-date-picker>
					</el-form-item>
					<el-form-item size="large">
						<el-button type="primary" icon="el-icon-search" @click="goSearch()"
							style="margin-left: 12px">查询</el-button>
						<el-button @click="reloadForm">重置</el-button>
					</el-form-item>
				</el-form>
				<div class="opera-table">
					<el-table :data="tableData" height="580px" class="table" border style="" v-loading="loading"
						element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
						element-loading-background="rgba(0, 0, 0, 0.8)">
						<el-table-column prop="title" label="描述">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="ddimage" label="订单截图">
							<template slot-scope="scope">
								<el-popover placement="top-start" trigger="click">
									<a :href="scope.row.ddimage" target="_blank" title="查看图片">
										<el-image :src="scope.row.ddimage" style="width: 500px;"></el-image>
									</a>
									<el-image :src="scope.row.ddimage" fit="cover" style="width:100px;height:100px ;"
										slot="reference"></el-image>
								</el-popover>
							</template>
						</el-table-column>

						<el-table-column prop="zhimage" label="证据图片">
							<template slot-scope="scope">
								<el-popover placement="top-start" trigger="click">
									<a :href="scope.row.zhimage" target="_blank" title="查看图片">
										<el-image :src="scope.row.zhimage" style="width: 500px;"></el-image>
									</a>
									<el-image :src="scope.row.zhimage" fit="cover" style="width:100px;height:100px ;"
										slot="reference"></el-image>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="zhimage" label="线索图片">
							<template slot-scope="scope">
								<el-popover placement="top-start" trigger="click">
									<a :href="scope.row.xsimage" target="_blank" title="查看图片">
										<el-image :src="scope.row.xsimage" style="width: 500px;"></el-image>
									</a>
									<el-image :src="scope.row.xsimage" fit="cover" style="width:100px;height:100px ;"
										slot="reference"></el-image>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="luyin" label="电话录音">
							<template slot-scope="scope">
								<audio v-if="scope.row.luyin!=''" :src="scope.row.luyin" controls
									@click="playAudio(scope.row.luyin)"></audio>
								<!-- <div @click="playAudio(scope.row.luyin)">
									点击 播放
									
								</div> -->

							</template>
						</el-table-column>
						<el-table-column prop="xsphone" label="线索手机号">
						</el-table-column>
						<el-table-column prop="beizhu" label="备注">
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template slot-scope="scope">
								<el-tag type="text" size="small" v-if="scope.row.status=='1'">审核中</el-tag>
								<el-tag type="text" size="small" v-if="scope.row.status=='2'">同意</el-tag>
								<el-tag type="text" size="small" v-if="scope.row.status=='3'">拒绝</el-tag>
								<el-tag type="text" size="small" v-if="scope.row.status=='4'">线索发放中</el-tag>
								<el-tag type="text" size="small" v-if="scope.row.status=='5'">线索已发放</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="addtime" label="提交时间">
							<template slot-scope="scope">
								{{ scope.row.addtime | datefilter }}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="info" size="mini" v-if="scope.row.List!=null"
									@click="scanOrder(scope.row)">查看订单</el-button>
								<el-button type="warning" size="mini" v-if="scope.row.status=='1'"
									@click="handle_sh(scope.row)">审核</el-button>

								<el-button type="primary" size="mini" v-if="scope.row.status=='2'&&scope.row.price=='0'"
									@click="handle_ff(scope.row)">发放线索</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-dialog title="审核" :visible.sync="dialogTableVisible">
					<el-form :model="shform">

						<el-form-item label="是否通过" :label-width="formLabelWidth">
							<el-select v-model="shform.status" placeholder="请选择">
								<el-option label="同意" value="2"></el-option>
								<el-option label="拒绝" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="价格" :label-width="formLabelWidth" v-if="shform.status=='2'">
							<el-input v-model="shform.price" autocomplete="off" placeholder="请输入价格"></el-input>
						</el-form-item>
						<el-form-item label="备注" :label-width="formLabelWidth">
							<el-input v-model="shform.beizhu" autocomplete="off" placeholder="请输入备注"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogTableVisible = false">取 消</el-button>
						<el-button type="primary" @click="submitSh">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="发放线索" :visible.sync="ff_dialogTableVisible">
					<el-form :model="ff_form">
						<el-form-item label="新线索手机号" :label-width="formLabelWidth">
							<el-input v-model="ff_form.xsphone" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="ff_dialogTableVisible = false">取 消</el-button>
						<el-button type="primary" @click="submitFf">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 查看订单 -->
				<el-dialog title="订单" :visible.sync="scanOrder_dia">
					<el-table :data="orderList" style="width: 100%">
						<el-table-column prop="orderid" label="订单编号" >
						</el-table-column>
						<el-table-column prop="title" label="订单名称" >
						</el-table-column>
						<el-table-column prop="price" label="价格">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="addtime" label="下单时间">
							<template slot-scope="scope">
								{{ scope.row.addtime | datefilter }}
							</template>
						</el-table-column>
					</el-table>
				</el-dialog>
			</div>
		</div>
		<div class="footer">
			<el-pagination align="center" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page.sync="form.pageNo" :page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		fankuilist,
		fankuish,
		fankuixs
	} from "@/api/pullback.js";
	import {
		title
	} from "@/settings";
	import {
		datefilter
	} from '@/utils/arrToObj'
	import {
		getUserList
	} from "@/api/userMangement.js";
	export default {
		data() {
			return {
				formLabelWidth: '100px',
				currentPage: 1,
				pageSize: 1,
				tableData: [],
				total: '',
				userName: '',
				columns: [{
						dataKey: 'adminid',
						title: '用户id',
					},
					{
						dataKey: 'content',
						title: '日志内容',
					}
				],
				form: {
					phone: '',
					status: 0,
					inttime: 0,
					endtime: 0,
					pageNo: 1,
					pageSize: 10,
				},
				dialogTableVisible: false,
				ff_dialogTableVisible: false,
				shform: {
					id: '',
					status: '',
					beizhu: '',
					adminid: '',
					price: ''
				},
				ff_form: {
					xsphone: ''
				},
				loading: false,
				mediaUrl: '',
				amr: null,
				isPlay: false,
				options: [{
					value: '0',
					label: '全部'
				}, {
					value: '1',
					label: '审核中'
				}, {
					value: '2',
					label: '同意'
				}, {
					value: '3',
					label: '拒绝'
				}, {
					value: '4',
					label: '线索提交中'
				}, {
					value: '5',
					label: '线索已发放'
				}],
				timeValue: "",
				searchStatus: '',
				scanOrder_dia: false,
				orderList: []
			}
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		mounted() {
			this.getList();
		},
		methods: {
			reloadForm() {
				this.form.phone = '';
				this.form.inttime = 0;
				this.form.endtime = 0;
				this.form.status = 0;
				this.timeValue = '';
				this.searchStatus = '';
				this.form.pageNo = 1;
				this.form.pageSize = 10;
				this.getList();
			},
			// 搜索按钮
			goSearch() {
				if (this.timeValue) {
					this.form.inttime = parseInt(this.timeValue[0] / 1000);
					this.form.endtime = parseInt(this.timeValue[1] / 1000);
				}
				if (this.searchStatus) {
					this.form.status = parseInt(this.searchStatus)
				}
				this.getList()
			},
			// 获取日志列表
			async getList() {
				this.loading = true;
				let result = await fankuilist(this.form);
				this.tableData = result.data.data;
				this.total = result.data.totalCount;
				this.loading = false;
			},
			//当前页改变时触发 跳转其他页
			handleCurrentChange(val) {
				this.form.pageNo = val;
				this.getList();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.form.pageSize = val;
				this.getList()
			},
			handle_sh(val) {
				console.log('xxxxxxxx', val);
				this.shform.id = val.id;
				this.dialogTableVisible = true;
			},
			// 审核提交
			async submitSh() {
				if (this.shform.status == '') {
					this.$message({
						message: '请选择是否同意',
						type: 'warning'
					})
					return
				} else if (this.shform.beizhu == '') {
					this.$message({
						message: '请填写备注',
						type: 'warning'
					})
					return
				} else if (this.shform.price == '' && this.shform.status == '2') {
					this.$message({
						message: '请填写价格',
						type: 'warning'
					})
					return
				}


				let result = await fankuish({
					id: parseInt(this.shform.id),
					status: parseInt(this.shform.status),
					beizhu: this.shform.beizhu,
					adminid: Number(localStorage.getItem('userId')),
					price: parseFloat(this.shform.price)
				});
				if (result.code == 0) {
					this.$message({
						message: '审核成功 ',
						type: "success"
					})
					this.dialogTableVisible = false;
					this.getList()
				}

			},
			// 发放线索按钮点击方法
			handle_ff(val) {
				this.ff_dialogTableVisible = true;
				this.ff_form.id = val.id;
			},
			// 提交发放线索 
			async submitFf() {
				if (this.ff_form.xsphone == '') {
					this.$message({
						message: '请输入新线索手机号',
						type: 'warning'
					})
					return
				}
				let result = await fankuixs({
					id: parseInt(this.ff_form.id),
					xsphone: this.ff_form.xsphone,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						message: '发放成功',
						type: "success"
					})
					this.ff_dialogTableVisible = false;
					this.getList()
				}
			},
			playAudio(val) {
				val.play()
			},

			scanOrder(val) {
				this.scanOrder_dia = true;
				this.orderList = val.List;

			}
			// 音频播放
			// playAudio(url) {
			// 	console.log('url',url)
			// 	this.mediaUrl = url
			// 	if (this.isPlay) {
			// 		this.isPlay = false
			// 		if (this.amr.isPlaying()) {
			// 			this.amr.stop(); //停止
			// 		}
			// 	} else {
			// 		var BenzAMRRecorder = require('benz-amr-recorder');
			// 		this.amr = new BenzAMRRecorder();
			// 		this.isPlay = true
			// 		this.amr.initWithUrl(url).then(() => {
			// 			this.amr.play();
			// 		});
			// 		this.amr.onEnded(() => {
			// 			this.isPlay = false
			// 		})
			// 	}
			// },

		},
	}
</script>
<style style="scss" scoped>
	.header {
		font-size: 18px;
		font-weight: 400
	}

	.container {
		background-color: #EBEEF5
	}

	.mian-table {
		height: 693px;
		margin: 20px;
		background-color: white;

		.add-drawer-btn {
			padding: 20px 0 20px 20px;
			position: absolute;
			bottom: 0;
			right: 5%;
			text-align: right
		}

		.opera-table {
			padding-right: 20px;
			padding-bottom: 20px;

			.table {
				width: 100%;
				margin: 10px;
			}
		}

		.form-item {
			width: 250px;
		}
	}

	.footer {
		height: 3%;
		background-color: white;
		/* text-align: center; */
		padding: 20px
	}
</style>